<template>
  <el-dialog
    class="gl_dialog_TitleLine"
    width="800px"
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <el-form
      ref="noneCompetitiveVO"
      :model="noneCompetitiveVO"
      :rules="rules"
      class="gl_form_mini"
      label-position="right"
      label-width="100px"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label-width="0px">
            <PersonalImage v-if="resultInfo.registerTypeCode == 'I'" :imgurl="resultInfo.imagePath" :imgheight="'60px'" />
            <img v-else :src="getStaticAvatarUrl(resultInfo.imagePath)" class="avatar gl_mr_10" @error="errorPhoto">
            <div class="gl_ml_10" style="display:inline-block; vertical-align: middle;">
              <p>{{ resultInfo.playerName }}</p>
              <p v-if="resultInfo.registerTypeCode != 'T'">{{ resultInfo.delegationName ? resultInfo.delegationName : '- -' }}</p>
              <p v-else>{{ resultInfo.memberNames ? resultInfo.memberNames : '- -' }}</p>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-row>
            <el-col :span="24">
              <el-form-item label="总得分">
                <span>{{ resultInfo.totalScore }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="准确度得分" prop="accuracyScore">
                <el-input v-model.trim="noneCompetitiveVO.accuracyScore" type="text" size="mini" :disabled="isNoEdit" placeholder="请输入准确度得分" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="表现力得分" prop="expressiveScore">
                <el-input v-model.trim="noneCompetitiveVO.expressiveScore" type="text" size="mini" :disabled="isNoEdit" placeholder="请输入表现力得分" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="判定方式" prop="irmCode">
                <el-select v-model="noneCompetitiveVO.irmCode" style="width:100%" size="mini" placeholder="请选择判定方式" @change="changeIrm">
                  <el-option v-for="item in dict.iRMType" :key="item.code" :value="item.code" :label="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="比赛状态" prop="statusCode">
                <el-select v-model="noneCompetitiveVO.statusCode" style="width:100%" size="mini" placeholder="请选择比赛状态" @change="changeIsNoEdit">
                  <template v-for="item in dict.status">
                    <template v-if="item.code==='Running' || item.code==='Scheduled' || item.code==='UnOfficial'">
                      <el-option :key="item.code" :value="item.code" :label="item.value" />
                    </template>
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      <el-button v-loading="submitLoading" size="mini" type="primary" @click="submitResult">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { CopyData } from '@/lib';
import defaultPersonImg from '@/assets/images/face_default.png';
import PersonalImage from '@/components/PersonalImage/index';
import { SiSTKWEventsManagementUpdateUnitResultNoneCompetitiveInput } from '@/lib/form/game/swaggerForm';
import { SiSTKWEventsManagementUpdateUnitResultNoneCompetitiveInput_Rules } from '@/lib/validate/events/index';
import {
  api_PUT_EventsManagementUnitResultNoneCompetitiveUnitResultId
} from '@/extend/api/gameswaggerApi/app';
export default {
  components: {
    PersonalImage
  },
  data() {
    return {
      title: '编辑成绩',
      defaultPersonImg: defaultPersonImg,
      dialogVisible: false,
      resultInfo: {},
      submitLoading: false,
      unitResultId: '',
      noneCompetitiveVO: new SiSTKWEventsManagementUpdateUnitResultNoneCompetitiveInput(),
      noneCompetitiveVO_Rules: new SiSTKWEventsManagementUpdateUnitResultNoneCompetitiveInput_Rules(),
      rules: {},
      isNoEdit: false
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  watch: {
    'noneCompetitiveVO.combatScoreB': function() {
      this.noneCompetitiveVO.combatScoreA = Number(this.noneCompetitiveVO.combatScoreB) + Number(this.noneCompetitiveVO.combatScoreB);
    },
    dialogVisible(val) {
      if (!val) {
        this.$refs['noneCompetitiveVO'].resetFields();
      }
    }
  },
  created() {
    this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    open(resultInfo) {
      this.resultInfo = resultInfo;
      // resultInfo.irmCode = resultInfo.irmCode ? resultInfo.irmCode : 'NORM';
      this.unitResultId = resultInfo.unitResultId;
      this.noneCompetitiveVO = new SiSTKWEventsManagementUpdateUnitResultNoneCompetitiveInput();
      CopyData(resultInfo, this.noneCompetitiveVO);
      this.dialogVisible = true;
      if (resultInfo.statusCode === 'UnOfficial' || resultInfo.irmCode === 'NORM') {
        this.rules = this.noneCompetitiveVO_Rules;
        this.isNoEdit = true;
      } else {
        this.rules = {};
        this.isNoEdit = false;
      }
    },
    changeIsNoEdit(val) {
      if (val === 'UnOfficial' && this.noneCompetitiveVO.irmCode === 'NORM') {
        this.rules = this.noneCompetitiveVO_Rules;
        this.isNoEdit = true;
      } else {
        this.rules = {};
        this.isNoEdit = false;
      }
    },
    changeIrm(val) {
      if (val === 'NORM' && this.noneCompetitiveVO.statusCode === 'UnOfficial') {
        this.rules = this.noneCompetitiveVO_Rules;
      } else {
        this.rules = {};
      }
    },
    submitResult() {
      this.$refs.noneCompetitiveVO.validate(valid => {
        if (!valid) return;
        this.editNoneCompetitiveResult();
      });
    },
    // 编辑非竞技类比赛成绩
    editNoneCompetitiveResult() {
      this.submitLoading = true;
      return new Promise((resolve, reject) => {
        api_PUT_EventsManagementUnitResultNoneCompetitiveUnitResultId(this.unitResultId, this.noneCompetitiveVO).then(res => {
          resolve(res);
          this.submitLoading = false;
          this.$message({ type: 'success', message: '编辑成绩成功！' });
          this.$emit('refreshPage');
          this.dialogVisible = false;
        }, error => {
          reject(error);
          this.submitLoading = false;
          this.$message({ type: 'error', message: '编辑成绩失败！' });
        });
      });
    },
    // 获取静态图片地址
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPersonImg;
    },
    // 头像回显
    getStaticAvatarUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return require('@/assets/images/face_default.png');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.avatar {
  max-width: 60px;
  max-height: 60px;
  vertical-align: middle;
}
</style>
